<template>
  <div class="left-bar">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#1e000000"
      text-color="#ffffff"
      active-text-color="#89c6fa">
      <RouterLink to="/" class="mybut">
        <el-menu-item index="1">
          <i class="el-icon-location"></i>
          <span>首页</span>
        </el-menu-item>
      </RouterLink>
      <router-link to="/admin" class="mybut">
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">管理员信息</span>
      </el-menu-item>
      </router-link>
      <router-link to="/user-Admin" class="mybut">
        <el-menu-item index="3">
          <i class="el-icon-document"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
      </router-link>
      <router-link to="/book-add" class="mybut">
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">添加图书</span>
      </el-menu-item>
      </router-link>
      <router-link to="/book-admin" class="mybut">
      <el-menu-item index="5">
        <i class="el-icon-setting"></i>
        <span slot="title">图书管理</span>
      </el-menu-item>
      </router-link>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Navigation-Admin"
}
</script>

<style >
.left-bar{
  position: fixed;
  left:0;
  width: 20vw;
  height: 100vh;
  z-index: 2333;
  display: inline;
  background-color: rgba(0, 0, 0, 0.5);
}
.el-menu{
  width: 20vw;
  height: 80vh;
  top: 85px;
  border: 0;
  position: fixed;
}
.el-menu .el-menu-item{
  height: 20%;
}
.mybut {
  text-decoration:none;
}
</style>
